<!-- app/templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ vnf.name }}</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>{{ vnf.name }}</h1>
        </header>

        <h2>VNF Info</h2>
        <table>
            <thead>
              <tr>
                <th>VNF Type</th>
                <th>VNF CPU</th>
                <th>VNF RAM</th>
                <th>VNF ROM</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ vnf.type }}</td>
                <td>{{ vnf.cpu }}</td>
                <td>{{ vnf.ram }}</td>
                <td>{{ vnf.rom }}</td>
              </tr>
            </tbody>
        </table>

        <h2>VNF Route</h2>
        <table border="1" cellpadding="5" cellspacing="0">
            <thead>
                <tr>
                    <th>Source</th>
                    <th>Destination(s)</th>
                </tr>
            </thead>
            <tbody>
                {% for source, destinations in vnf.route.items() %}
                    <tr>
                        <td>{{ source }}</td>
                        <td>
                            {% for destination in destinations %}
                                {{ destination }}<br>
                            {% endfor %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</body>
</html>